<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view class="infoMationTop ">
			<view class="infoMationCenter">
				消息中心
			</view>
			<view class="pushSet" @click="pushSet">
				推送设置
			</view>
		</view>
		<view class="topTitle me-fx-row-sb-c">
			<view class="privateChat fontSize" @click="privateChat(0)" :class="[privateIndex == 0?'topActive':'']">
				<text class="iconNum" v-if="siliaoNum > 0">{{siliaoNum}}</text>
				私聊
			</view>
			<view class="systemInformation fontSize" @click="systemInformation(1)" :class="[systemIndex == 1?'topActive':'']">
				<!-- <text class="iconNum" v-if="systemNum">{{item.isread}}</text> -->
				系统消息
			</view>
		</view>
		<block v-if="privateShow">
		<block v-for="(item, index) in list" :key="index">
			<view class="informationBox me-fx-row-start-c" @click="chatList(item.receiver,item.username)" >
				<view class="imgBox">
					<image :src="item.avatar" mode="" class="informationPic"></image>
					<view class="smallH" v-if="siliaoNum > 0">
			
					</view>
				</view>
				<view class="informationBoxRight me-fx-col-sb">
					<view class="nameTimeBox me-fx-row-sb-c">
						<view class="name">
							{{item.username}}
						</view>
						<view class="time">
							{{item.created_at}}
						</view>
					</view>
					<view class="brief me-text-beyond">
						{{item.content}}
					</view>
				</view>
			</view>
		</block>
		</block>
		<view class="systemInformationBbc" v-else>
			<view class="systemInformationBox me-fx-row-start-c" @click="stationGB">
				<image src="../../static/img/newimg/b2.png" mode="" class=""></image>
				<view class="systemInformationRight">
					<view class="radio">
						电台广播
					</view>
					<!-- <view class="information">
						暂无新消息
					</view> -->
				</view>
			</view>
			<view class="systemInformationBox me-fx-row-start-c" @click="lookBtn">
				<image src="../../static/img/newimg/b1.png" mode="" class=""></image>
				<view class="systemInformationRight">
					<view class="radio">
						查看申请
					</view>
					<!-- <view class="information">
						暂无新消息
					</view> -->
				</view>
			</view>
			<view class="systemInformationBox me-fx-row-start-c" @click="pingjiaInform">
				<image src="../../static/img/newimg/b3.png" mode="" class=""></image>
				<view class="systemInformationRight">
					<view class="radio">
						评价通知
					</view>
				<!-- 	<view class="information">
						暂无新消息
					</view> -->
				</view>
			</view>
			<view class="systemInformationBox me-fx-row-start-c" @click="systemInformationBtn">
				<image src="../../static/img/newimg/b4.png" mode="" class=""></image>
				<view class="systemInformationRight">
					<view class="radio">
						系统信息
					</view>
					<!-- <view class="information">
						暂无新消息
					</view> -->
				</view>
			</view>
			<view class="systemInformationBox me-fx-row-start-c"  @click="hongbaoInformationBtn">
				<image src="../../static/img/66cf2011919f47ccd112eee016add3f.png" mode="" class=""></image>
				<view class="systemInformationRight">
					<view class="radio">
						红包通知
					</view>
					<!-- <view class="information">
						暂无新消息
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				privateIndex: 0,
				systemIndex: 0,
				systemNum: false,
				privateShow: true,
				barHeight: 25,
				list: [],
				isread: '',
				siliaoNum: 0
			}
		},
		created() {
			this.getSystemStatusBarHeight()
		},
		onShow() {
			this.getList()
		},
		methods: {
			onPullDownRefresh() {
				this.getList()
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			//获取系统状态栏高度
			getSystemStatusBarHeight: function() {
				// #ifdef APP-PLUS
				var height = plus.navigator.getStatusbarHeight();
				this.barHeight = height;
				// #endif
				// #ifdef H5
				this.barHeight = 0;
				// #endif
			},
			hongbaoInformationBtn(){
				uni.navigateTo({
					url: '../information/hongBao'
				})
			},
			getList() {
				this.$u.get('/chat/list').then(res => {
						if (res) {
							this.list = res.data.list
							this.siliaoNum = 0
							for (let i = 0; i < this.list.length; i++) {
								this.siliaoNum = this.siliaoNum + Number(this.list[i].unread)
							}
						}
					})
					.catch((res) => {})
			},
			chatList(id, username) {
				uni.navigateTo({
					url: '../information/chatFrame?id=' + id + '&username=' + username
				})
			},
			systemInformationBtn() {
				uni.navigateTo({
					url: '../information/systeminformation'
				})
			},
			pushSet() {
				uni.navigateTo({
					url: '../information/pushSet'
				})
			},
			stationGB() {
				uni.navigateTo({
					url: '../information/radio'
				})
			},
			privateChat(index) {
				this.privateIndex = index
				this.systemIndex = 2;
				this.privateShow = true
			},
			systemInformation(index) {
				this.systemIndex = index;
				this.privateIndex = 2
				this.privateShow = false
			},
			pingjiaInform() {
				uni.navigateTo({
					url: '../information/evaluate'
				})
			},
			lookBtn() {
				uni.navigateTo({
					url: "../information/lookApply"
				})
			},
		}
	}
</script>

<style>
	.imgBox {
		position: relative;
		width: 104rpx;
		height: 104rpx;
		border-radius: 8rpx;
	}

	.smallH {
		position: absolute;
		top: 0;
		right: 0;
		width: 20rpx;
		height: 20rpx;
		background: rgba(224, 64, 64, 1);
		border-radius: 50%;
	}

	.infoMationTop {
		padding: 20rpx 20rpx 10rpx;
		position: relative;
		height: 94rpx;
		border-bottom: 1rpx solid rgba(245, 245, 245, 1);
		box-sizing: border-box;
	}

	.systemInformationBox image {
		width: 104rpx;
		height: 104rpx;
		background: rgba(249, 246, 255, 1);
		border-radius: 14rpx;
	}

	.systemInformationBox {
		margin-top: 49rpx;
	}

	.infoMationCenter {
		text-align: center;
		font-weight: 700;
	}

	.pushSet {
		font-weight: 700;
		color: #aa00ff;
		position: absolute;
		top: 20rpx;
		right: 3%;
	}

	.informationBox .informationPic {
		width: 104rpx;
		height: 104rpx;
		border-radius: 8rpx;
	}

	.systemInformationBbc {
		padding: 0 26rpx 26rpx;
		box-sizing: border-box;
	}

	.informationBoxRight {
		margin-left: 23rpx;
		width: 80%;
	}

	.informationBoxRight .brief {
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
	}

	.nameTimeBox .name {
		font-size: 34rpx;
		font-weight: bold;
		color: rgba(68, 68, 68, 1);
	}

	.nameTimeBox .time {
		font-size: 24rpx;
		color: rgba(102, 102, 102, 1);
	}

	.topTitle {
		width: 60%;
		margin: auto;
		height: 104rpx;
	}

	.topActive {
		color: #5C14FF !important;
		border-bottom: 1rpx solid #5C14FF;
		font-size: 34rpx;
		font-weight: 700;
	}

	.iconNum {
		position: absolute;
		top: -12px;
		right: -17px;
		background-color: #AA00FF;
		text-align: center;
		color: white;
		font-size: 11px;
		background: rgba(224, 64, 64, 1);
		border-radius: 50%;
		padding: 1px 6px;
	}

	.privateChat {
		position: relative;
	}

	.systemInformation {
		color: rgba(125, 124, 124, 1);
	}

	.fontSize {
		font-size: 30rpx;
	}

	.informationBox {
		padding: 20rpx 26rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid rgba(245, 245, 245, 1);
	}

	.systemInformationRight .radio {
		font-size: 34rpx;
		font-weight: bold;
		color: rgba(68, 68, 68, 1);
	}

	.systemInformationRight .information {
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
	}

	.systemInformationRight {
		margin-left: 26rpx;
	}

	.information {
		margin-top: 27rpx;
	}

	.fontSize {
		font-size: 30rpx;
	}
</style>
